<template>
    <div class="container">
        <el-row class="tac">
            <el-col :span="12">
                <div style="height: 60px;"></div>
                <el-menu default-active="1" 
                        class="el-menu-vertical-demo" 
                        background-color="#545c64" 
                        text-color="#fff"
                        active-text-color="#ffd04b" 
                        @open="handleOpen" 
                        @close="handleClose" 
                        :collapse="isCollapse"
                        router>
                    <template v-for="(item, index) in routers">
                        <el-sub-menu :index="String(index)" v-if="!item.hidden" :key="item.id">
                            <template #title>
                                <i class="el-icon-location"></i>
                                <span slot="title">{{ item.meta.name }}</span>
                            </template>
                            <el-menu-item :index="subItem.path" v-for="subItem in item.children" :key="subItem.id"
                               >{{subItem.meta.name }}</el-menu-item>
                        </el-sub-menu>
                    </template>
                </el-menu>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
} from '@element-plus/icons-vue'
import { ref, reactive, toRefs } from 'vue'
import { useRoute, useRouter } from 'vue-router';
export default {
    name: 'Aside',
    setup(props) {
        const router = useRouter();
        const routers = reactive(router.options.routes);

        console.log(routers);
        return {
            routers
        }
    },
    components: {

    },
    beforeCreate() {

    },
    data() {
        return {
            isCollapse: false,
        }
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath)
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath)
        },
        goTo(path) {
            alert(path)
            this.$router.push({
                path: path
            })
        }
    }
};
</script>
<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}

.tac {
    text-align: center;
}

.el-menu--horizontal {
    --el-menu-horizontal-height: 100px;
}
</style>